.box {
  background-color: #efefef;
  height: 100vh;

  .top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 45px;
    background-color: #fff;
    z-index: 1;
  }

  .middle {
    padding-top: 45px;
    /* 改造样式，进行高度的动态计算 */
    margin-bottom: 60px;
    height: calc(100vh - 60px);
    overflow-y: scroll;
    box-sizing: border-box;

    .left,
    .right {
      display: flex;
      align-items: center;
      margin: 10px;
      .msg {
        position: relative;
        margin-left: 13px;
        background-color: #fff;
        min-height: 40px;
        border-radius: 5px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
        padding: 5px 10px;
        display: flex;
        align-items: center;
        max-width: 65%;
      }
      .arrow {
        transform: rotateZ(90deg);
        position: absolute;
        left: -9px;
      }
    }

    .right {
      flex-direction: row-reverse;
      .msg {
        margin: 0 13px 0 0;
        background-color: #95ec69;
      }
      .arrow {
        right: -9px;
        left: inherit;
        transform: rotateZ(-90deg);
      }
    }
  }

  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 60px;
    display: grid;
    grid-template-columns: 7fr 3fr;
    background-color: #fff;
    border-top: 1px solid #ddd;
    padding: 5px;
    box-sizing: border-box;
    textarea {
      height: 100%;
    }
  }
}
